import React from 'react'
import { Select,Row, Col,Input,Button  } from 'antd';

export default class SelectInput extends React.Component{
    render() {
        function handleChange(value) {
            console.log(`selected ${value}`);
        }

        function onChange(value) {
        console.log(`selected ${value}`);
        }

        function onBlur() {
        console.log('blur');
        }

        function onFocus() {
        console.log('focus');
        }

        function onSearch(val) {
        console.log('search:', val);
        }

        const { Option } = Select;
        return (
            <div>
                <Row gutter={[16, 24]}>
                    <Col className="gutter-row" span={6}>
                        资源类型&nbsp;
                        <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        资源名称&nbsp;
                         <Input style={{ width: 121 }} placeholder="Basic usage" />
                    </Col>
                    <Col className="gutter-row" span={6}>
                        运输类型&nbsp;
                         <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Col>
                    <Col className="gutter-row" span={6}>状态&nbsp;
                        <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Col>
                </Row>
                <Row gutter={[16, 24]}>
                    <Col className="gutter-row" span={6}>
                        生效状态&nbsp;
                        <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        服务机场&nbsp;
                         <Select
                            showSearch
                            style={{ width: 121 }}
                            placeholder="Select a person"
                            optionFilterProp="children"
                            onChange={onChange}
                            onFocus={onFocus}
                            onBlur={onBlur}
                            onSearch={onSearch}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="tom">Tom</Option>
                        </Select>
                    </Col>
                    <Col className="gutter-row" span={6}>
                        车辆类型&nbsp;
                         <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>
                                Disabled
                            </Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </Col>
                    <Col className="gutter-row" span={6}>店铺&nbsp;
                        <Select
                            showSearch
                            style={{ width: 121 }}
                            placeholder="Select a person"
                            optionFilterProp="children"
                            onChange={onChange}
                            onFocus={onFocus}
                            onBlur={onBlur}
                            onSearch={onSearch}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="tom">Tom</Option>
                        </Select>
                    </Col>
                </Row>
                <Row>
                    <Col className="gutter-row">&nbsp;</Col>
                </Row>
                <Row>
                    <Col span={4} offset={20}>
                            <Button type="primary">Primary</Button>
                    </Col>
                </Row>
                
            </div>
        )
    }
}